import React from "react"
import { useLocation, useHistory } from 'react-router-dom'
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Text
} from "@chakra-ui/react"
import SignUp from "./SignUp"
import SignIn from "./SignIn"

export default function Sign() {
  const { pathname } = useLocation()
  const index = pathname === '/sign_in' ? 0 : 1
  const history = useHistory()
  const handleChangeIndex = index => {
    if (index === 0) {
      history.push('/sign_in')
    } else {
      history.push('/sign_up')
    }
  }
  return (
    <Box w="400px" h="400px" display="inline-block" bgColor="#fff" mt="50px" p={50} boxShadow="0 0 8px rgb(0 0 0 / 10%)" borderRadius="4px">
      <Tabs isFitted defaultIndex={index} onChange={handleChangeIndex}>
        <TabList w="160px" mx="auto" mb="20px" borderBottom="none" color="#969696">
          <Tab
            _focus={{ boxShadow: "none" }}
            _selected={{ color: '#ea6f5a', borderBottom: '2px solid #ea6f5a' }}
          >登录</Tab>
          <Text p="10px" fontWeight="700" fontSize="16px">·</Text>
          <Tab
            _focus={{ boxShadow: "none" }}
            _selected={{ color: '#ea6f5a', borderBottom: '2px solid #ea6f5a' }}
          >注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignIn />
          </TabPanel>
          <TabPanel>
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
